<template>
	<view class="mainAccountBox">
		<view class="mainAccountParent">
			<view class="mainAccountParent_current">
				<view>当前主账号</view>
				<view style="color:forestgreen">{{curMainAccount == ''?'空':curMainAccount}}</view>
			</view>
			<view class="mainAccountParent_List">
				<view class="mainAccountParent_ListTitle">相同身份证与手机号关联账号，设置主账号</view>
				<view class="mainAccountParent_ListBox">
					<view>
						<radio-group v-model="MainAccountValue" :value="MainAccountValue" @change="mainAccont">
							<view v-for="(ele,ind) in sameAccounts" class="listitem" :key="ind">
								<radio :value="ele.value" :checked="ele.value === MainAccountValue"/>
								<text style="margin-left:20rpx;">{{ele.label}}</text>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="mainAccountParent_ListTitle">选择关联子账号</view>
				<view class="mainAccountParent_ListBox">
					<view>
						<checkbox-group @change="childrenAccount" :value="SubAccountValue" v-model="SubAccountValue">
							<view v-for="(ele,ind) in sameAccounts" class="listitem" :key="ind">
								<checkbox  :value="ele.value" :checked="SubAccountValue.includes(ele.value)"/>								
								<text style="margin-left:20rpx;">{{ele.label}}</text>
							</view>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="saveFuncButton" @click="doSubmit">
			保存提交
		</view>
	</view>
</template>

<script>
	import {getSameMemberList,mainAccountSubmit} from "@/api/directSelling.js"
	export default {
		data() {
			return {
				title: '',
				smsCode:'',
				sameAccounts:[],
				curMainAccount:'',
				MainAccountValue: '',
				SubAccountValue:[],
			}
		},
		created() {
			this.getSameMemberList();
		},
		methods:{
			getSameMemberList(){
				getSameMemberList().then((res)=>{
					let data=res.data;
					data.forEach(i=>{
					  if(i.qq=='1'){
					    this.curMainAccount = i.memberCode;
					    this.MainAccountValue = i.memberId+'';
					  }else if(i.qq == "2"){
					    this.SubAccountValue.push(i.memberId+'');
					  }
					  let accountInfo= {
					    label: i.memberCode + ' - ' + i.realName,
					    value: i.memberId+'',
					  };
					  this.sameAccounts.push(accountInfo);
					});
				})
			},
			//主账号选择数据
			mainAccont(e){
				this.MainAccountValue=e.detail.value;
				console.log(this.MainAccountValue);
			},
			//关联自账号
			childrenAccount(e){
				this.SubAccountValue=e.detail.value;
			},
			doSubmit(){
				if (this.MainAccountValue==''){
				  this.$util.Tips({
				  	title: '请选择主账户！'
				  })
				  return;
				}
				if (this.SubAccountValue.length == 0){
				  this.$util.Tips({
				  	title: '请关联子账号！'
				  })
				  return;
				}
				if(this.SubAccountValue.includes(this.MainAccountValue)){
				  this.$util.Tips({
				  	title: '子账号里不能包含主账号！'
				  })
				  return;
				}
				console.log('保存提交');
				mainAccountSubmit({
					"mainMemberId" : this.MainAccountValue,
					"subMemberIds" : this.SubAccountValue,
					"smsCode": this.smsCode,
				}).then((res)=>{
					let data=res.data;
					if(res.meta.success==true){
						this.$util.Tips({
							title: '设置账号成功！'
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
					}
				})
			}
		}	
	}
	
</script>

<style lang="scss">
	body,page{
		background:#fff;
	}
	.mainAccountBox{
		padding:20rpx 35rpx;
		box-sizing: border-box;
		background:#fff;
		.mainAccountParent_current{
			height:100rpx;
			line-height:100rpx;
			display: flex;
			align-items:center;
			justify-content: space-between;
			font-size:35rpx;
			font-weight: 500;
			padding:0 30rpx;
			box-sizing: border-box;
			border-top:1px solid #d9d9d9;
			border-bottom:1px solid #d9d9d9;
		}
		.mainAccountParent_List{
			.mainAccountParent_ListTitle{
				height:80rpx;
				line-height:80rpx;
				color:#888;
				font-size:26rpx;
				border-bottom:1px solid #d9d9d9;
				padding-left:20rpx;
				box-sizing: border-box;
			}
			.mainAccountParent_ListBox{
				.listitem{
					height:120rpx;
					line-height:120rpx;
					padding:0 40rpx;
					box-sizing: border-box;
					border-bottom:1px solid #d9d9d9;
				}
			}
			
		}
		
	}
	.saveFuncButton{
		width:700rpx;
		height:80rpx;
		line-height:80rpx;
		background:$theme-color;
		text-align:center;
		color:#fff;
		border-radius:30rpx;
		margin-top:100rpx;
	}
</style>
